export default {
    data() {
        return {
            statusBarHeight: 0,// 状态栏高度
            navBarHeight: 0, // 导航栏高度
            contentTop: 0,   // 内容区顶部距离
            viewHeight: 0,   // 可视区高度
            viewWidth: 0,// 可视区宽度
        };
    },
    computed: {
        // 计算样式对象
        navBarStyle() {
            return this.obj2strStyle({
                'padding-top': `${this.statusBarHeight - 5}px`,
                'height': `${this.navBarHeight + 10}px`,
                'line-height': `${this.navBarHeight + 10}px`,  // 设置 lineHeight 为导航栏高度，确保垂直居中
            });
        },
        // 计算样式对象
        navBarStyleViewWidth() {
            return this.obj2strStyle({
                'padding-top': `${this.statusBarHeight - 5}px`,
                'height': `${this.navBarHeight + 10}px`,
                'line-height': `${this.navBarHeight + 10}px`,  // 设置 lineHeight 为导航栏高度，确保垂直居中
                'width': `calc( 100% - ${this.viewWidth}px)`
            });
        }
    },
    created() {
        this.setSystemInfo();
    },
    methods: {
        setSystemInfo() {
            const systemInfo = uni.getSystemInfoSync();
            const buttonBounding = uni.getMenuButtonBoundingClientRect();
            this.statusBarHeight = systemInfo.statusBarHeight;
            this.navBarHeight = (buttonBounding.top - this.statusBarHeight) * 2 + buttonBounding.height;
            this.contentTop = this.statusBarHeight + 40; // 内容区域顶部位置 (40 是固定的，可以根据需要调整)
            this.viewHeight = `calc(100vh - ${this.contentTop}px)`; // 使用 calc 计算视图高度
            this.viewWidth = buttonBounding.width + (systemInfo.windowWidth - buttonBounding.right)
        },

        obj2strStyle(obj) {
            let style = '';
            for (let key in obj) {
                const val = obj[key];
                style += `${key}:${val};`;
            }
            return style;
        }
    },
};